<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>支付</title>
    <script>
        //屏幕适应 
        (function (win, doc) {
            if (!win.addEventListener) return;
            var html = document.documentElement;

            function setFont() {
                var html = document.documentElement;
                var k = 375;
                html.style.fontSize = html.clientWidth / k * 100 + "px";
            }
            setFont();
            setTimeout(function () {
                setFont();
            }, 300);
            doc.addEventListener('DOMContentLoaded', setFont, false);
            win.addEventListener('resize', setFont, false);
            win.addEventListener('load', setFont, false);
        })(window, document);


    </script>
    <style>
        * {
            box-sizing: border-box;
            padding: 0;
            margin: 0;
        }

        html,
        body {
            color: #333;
            font-size: 0.14rem;
        }

        ol,
        ul,
        li {
            list-style: none;
        }

        input {
            outline: none;
            border: none;
        }

        input,
        label {
            -webkit-tap-highlight-color: transparent;
        }

        a {
            color: #333;
            text-decoration: none;
            outline: none;
        }

        i {
            display: inline-block;
        }

        .page {
            background-color: #f0f0f0;
        }

        .page .top {
            background-color: #fff;
        }

        .page .top .item {
            height: 0.5rem;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .page .top .item span {
            display: inline-block;
            height: 0.5rem;
            width: 0.9rem;
            text-align: center;
            line-height: 0.5rem;
            color: #666;
        }

        .page .top .item div {
            flex: 1;
            height: 100%;
            line-height: 0.5rem;
            text-align: left;
            border-bottom: 0.5px solid #ccc;
            color: #202020;
        }

        .page .top .item .itemEnd {
            border-bottom: none;
        }

        .page .title {
            height: 0.7rem;
            padding-left: 0.15rem;
            padding-top: 0.4rem;
            text-align: left;
        }

        .page .bot {
            background-color: #fff;
        }

        .page .bot .item1 {
            height: 0.7rem;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .page .bot .item1 .l {
            width: 0.66rem;
            height: 0.7rem;
            line-height: 0.7rem;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .page .bot .item1 .l .weChatIcon {
            width: 0.31rem;
            height: 0.31rem;
            line-height: 0.31rem;
            background: url('../images/weChatIcon.png') no-repeat center;
            background-size: 0.31rem;
        }

        .page .bot .item1 .l .zfbIcon {
            width: 0.31rem;
            height: 0.31rem;
            line-height: 0.31rem;
            background: url('../images/zfbIcon.png') no-repeat center;
            background-size: 0.31rem;
        }

        .page .bot .item1 .r {
            flex: 1;
            height: 100%;
            line-height: 0.7rem;
            padding-right: 0.3rem;
            border-bottom: 0.5px solid #EDEDED;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .page .bot .item1 .r .noCheck {
            width: 0.24rem;
            height: 0.24rem;
            background: url("../images/icon5.png") no-repeat center;
            background-size: 0.24rem;
        }

        .page .bot .item1 .r .check {
            width: 0.24rem;
            height: 0.24rem;
            background: url("../images/icon4.png") no-repeat center;
            background-size: 0.24rem;
        }

        .page .btnBox {
            background-color: #fff;
            padding-top: 0.64rem;
        }

        .page .noDisable {
            width: 3.2rem;
            height: 0.5rem;
            background-color:#FE664E;
            border-radius: 0.1rem;
            color: #fff;
            line-height: 0.5rem;
            text-align: center;
            margin: 0 auto;
            font-size: 0.18rem;
        }

        .page .disable {
            width: 3.2rem;
            height: 0.5rem;
            background-color: #ddd;
            border-radius: 0.1rem;
            color: #fff;
            line-height: 0.5rem;
            text-align: center;
            margin: 0 auto;
            font-size: 0.18rem;
        }
    </style>
</head>

<body>
    <div class="page">
        <div class="top">
            <div class="item">
                <span>交易类型</span>
                <div class="tradingType"></div>
            </div>
            <div class="item">
                <span>支付金额</span>
                <div class="payMoney"></div>
            </div>
            <div class="item">
                <span>订单编号</span>
                <div class="tradingNum"></div>
            </div>
            <div class="item">
                <span>订单时间</span>
                <div class="itemEnd createTime"></div>
            </div>
        </div>
        <div class="title">
            <span>请选择支付方式</span>
        </div>
        <div class="bot">
            <div class="item1 zfbPay">
                <div class="l">
                    <i class="zfbIcon"></i>
                </div>
                <div class="r">
                    <span>支付宝支付</span>
                    <i class="checkIcon check"></i>
                </div>
            </div>
            <div class="item1 weChatPay">
                <div class="l">
                    <i class="weChatIcon"></i>
                </div>
                <div class="r">
                    <span>微信支付</span>
                    <i class="checkIcon noCheck"></i>
                </div>
            </div>
        </div>
        <div class="btnBox">
            <div class="submit noDisable">立即支付</div>
        </div>
    </div>
</body>

</html>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://gw.alipayobjects.com/as/g/h5-lib/alipayjsapi/3.1.1/alipayjsapi.min.js"></script>





<script >


function getIndentMs(json) {
            alert(json);
            var data = JSON.parse(json);
            $('.tradingType').text(data.subject);
            $('.payMoney').text(data.amount);
            $('.tradingNum').text(data.ordersn);
            $('.createTime').text(data.create_at);
        };
        $('.item1').click(function () {
            $('.item1').find('.checkIcon').removeClass('check').addClass('noCheck');
            $(this).find('.checkIcon').addClass('check');
            if ($('.weChatPay').find('.checkIcon').hasClass('check')) {
                $('.submit').removeClass('noDisable').addClass('disable');
            } else {
                $('.submit').removeClass('disable').addClass('noDisable');
            }
        });
        // 点击支付
        $('.submit').click(function () {
            if ($(this).hasClass('disable')) {
                return false;
            } else {
                // 调用后台接口获取到唤起支付所需要的参数
                // $.ajax({
                //     type: 'post',
                //     url: '',
                //     data: {

                //     },
                //     success: function (da) {
                //         // 获取数据成功之后，唤起支付
                //         ap.tradePay({
                //             // tradeNO: da.tradeNO,
                //             // partnerID: da.partnerID,
                //             // bizType:da.partnerID,
                //             // bizContext: da.bizContext,
                //             // orderStr: da.orderStr
                //         }, function (res) {
                //             if (res.resultCode == 9000) {
                //                 alert('这是测试，订单支付成功');
                //                 return false;
                //             }
                //             if (res.resultCode == 4000) {
                //                 alert('这是测试，订单支付失败');
                //                 return false;
                //             }
                //         })
                //     }
                // });
            }
        });

</script>
